<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a><cite>运维管理</cite></a>
    <a><cite>添加企业开户</cite></a>
  </div>
</div>

<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-card-body" style="padding-top: 40px;">
      <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;margin-bottom: 50px">
        <div carousel-item>
          <div>
            <form class="layui-form" style="margin: 50px auto;" lay-filter="stepForm1">
              <script type="text/html" template lay-done="layui.data.done()">
                {{# let data = {}; }}
                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label">所属代理商</label>
                    <div class="layui-input-inline">
                      <input type="hidden" name="id" value=""/>
                      <select name="agent_id" id="agent_id" lay-filter="chooseagent">
                        <option value="">请选择代理商</option>
                      </select>
                    </div>
                  </div>
                  <div class="layui-inline">
                    <label class="layui-form-label">支付通道</label>
                    <div class="layui-input-inline">
                      <select name="pay_channel" lay-filter="pay_channel" class="layui-select">
                        <option value="adapay">汇付天下</option>
                        <option value="yeepay">易宝</option>
                      </select></div>
                  </div>
                </div>
                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label">企业名称</label>
                    <div class="layui-input-inline">
                      <input name="name" type="text" lay-verify="required" class="layui-input" value=""/>
                    </div>
                  </div>
                  <div class="layui-inline">
                    <label class="layui-form-label">企业简称</label>
                    <div class="layui-input-inline">
                      <input name="shortName" type="text" lay-verify="required" class="layui-input" value=""/>
                    </div>
                  </div>
                </div>
                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label">商户类型</label>
                    <div class="layui-input-inline">
                      <select name="signType" lay-verify="required" lay-reqtext="商户类型" lay-verType="tips">
                        <option value="">商户类型</option>
                        <option value="INDIVIDUAL">个体工商户</option>
                        <option value="ENTERPRISE">企业</option>
                        <option value="INSTITUTION">事业单位</option>
                        <option value="COMMUNITY">社会团体</option>
                      </select>
                    </div>
                  </div>
                  <div class="layui-inline">
                    <label class="layui-form-label">商户证件号码</label>
                    <div class="layui-input-inline">
                      <input type="text" class="layui-input" lay-verify="required" name="licenceNo"
                             value="{{d.params.licenceNo || ''}}">
                    </div>
                  </div>
                  <div class="layui-inline">
                    <label class="layui-form-label">有效期</label>
                    <div class="layui-input-inline">
                      <input type="text" class="layui-input" lay-verify="required" id="licenceNoExpires"
                             name="licenceNoExpires" value="{{d.params.licenceNoExpires || ''}}">
                    </div>
                  </div>
                </div>

                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label">法人名称</label>
                    <div class="layui-input-inline">
                      <input type="text" class="layui-input" lay-verify="required" name="legalName"
                             value="{{d.params.legalName || ''}}">
                    </div>
                  </div>
                  <div class="layui-inline">
                    <label class="layui-form-label">法人身份证号</label>
                    <div class="layui-input-inline">
                      <input type="text" class="layui-input" lay-verify="required" name="legalLicenceNo"
                             value="{{d.params.legalLicenceNo || ''}}">
                    </div>
                  </div>
                  <div class="layui-inline">
                    <label class="layui-form-label">法人身份证有效期</label>
                    <div class="layui-input-inline">
                      <input type="text" class="layui-input" lay-verify="required" id="legalLicenceNoExpires"
                             name="legalLicenceNoExpires" value="{{d.params.legalLicenceNoExpires || ''}}">
                    </div>
                  </div>
                </div>

                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label">联系人名称</label>
                    <div class="layui-input-inline">
                      <input type="text" class="layui-input" lay-verify="required" name="contactName"
                             value="{{d.params.contactName || ''}}">
                    </div>
                  </div>
                  <div class="layui-inline">
                    <label class="layui-form-label">联系人手机号</label>
                    <div class="layui-input-inline">
                      <input type="text" class="layui-input" lay-verify="required" name="contactMobile"
                             value="{{d.params.contactMobile || ''}}">
                    </div>
                  </div>
                </div>

                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label">联系人邮箱</label>
                    <div class="layui-input-inline">
                      <input type="text" class="layui-input" lay-verify="required" name="contactEmail"
                             value="{{d.params.contactEmail || ''}}">
                    </div>
                  </div>
                  <div class="layui-inline">
                    <label class="layui-form-label">联系人证件号</label>
                    <div class="layui-input-inline">
                      <input type="text" class="layui-input" lay-verify="required" name="contactLicenceNo"
                             value="{{d.params.contactLicenceNo || ''}}">
                    </div>
                  </div>
                </div>

                <div class="layui-form-item">
                  <label class="layui-form-label">经营地址</label>
                  <div class="layui-input-inline">
                    <select name="province" id="province" lay-verify="required" lay-filter="choosecity">
                      <option value="">请选择省</option>
                    </select>
                  </div>
                  <div class="layui-input-inline">
                    <select name="city" id="city" lay-verify="required" lay-filter="choosedistrict">
                      <option value="">请选择市</option>
                    </select>
                  </div>
                  <div class="layui-input-inline">
                    <select name="district" lay-verify="required" id="district">
                      <option value="">请选择县/区</option>
                    </select>
                  </div>
                  <!--                  <div class="layui-form-mid layui-word-aux">此处只是演示联动排版，并未做联动交互</div>-->
                </div>

                <div class="layui-form-item">
                  <label class="layui-form-label">详细地址</label>
                  <div class="layui-input-inline">
                    <input name="address" style="width:400px;" type="text" lay-verify="required" class="layui-input"
                           value=""/>
                  </div>
                </div>


                <div class="layui-form-item">
                  <label class="layui-form-label">开户总行</label>
                  <div class="layui-input-inline">
                    <select name="bankCode" id="bank_code" lay-verify="required" lay-search>
                      <option value="">请选择开户总行</option>
                    </select>
                  </div>
                </div>

                <div class="layui-form-item">
                  <label class="layui-form-label">对公账户卡号</label>
                  <div class="layui-input-inline">
                    <input name="bankCardNo" style="width:400px;" type="text" lay-verify="required" class="layui-input"
                           value=""/>
                  </div>
                </div>

                <div class="layui-form-item">
                  <label class="layui-form-label">经营范围</label>
                  <div class="layui-input-inline">
                    <input name="business_scope" style="width:400px;" type="text" lay-verify="required"
                           class="layui-input" value=""/>
                  </div>
                </div>

                <div class="layui-form-item" style="margin-left:50px;">
                  <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formStep">
                      下一步
                    </button>
                  </div>
                </div>
              </script>

            </form>
          </div>
          <div>
            <form class="layui-form " style="margin: 50px auto;max-width: 700px;" lay-filter="stepForm2">
              <div style="padding-top: 20px">
                <div class="layui-form-item">
                  <label class="layui-form-label form-required" style="width:180px;"
                         id="logo_label">商户证件照片</label>
                  <div class="layui-input-block">
                    <div id="logo_image"></div>
                  </div>
                </div>
              </div>

              <div style="padding-top: 20px">
                <div class="layui-form-item">
                  <label class="layui-form-label form-required" style="width:180px;" id="legalLicenceFrontUrlLabel">法人身份证（正面）</label>
                  <div class="layui-input-block">
                    <div id="legalLicenceFrontUrl"></div>
                  </div>
                </div>
              </div>

              <div style="padding-top: 20px">
                <div class="layui-form-item">
                  <label class="layui-form-label form-required" style="width:180px;" id="legalLicenceBackUrlLabel">法人身份证（背面）</label>
                  <div class="layui-input-block">
                    <div id="legalLicenceBackUrl"></div>
                  </div>
                </div>
              </div>

              <div class="layui-form-item" style="padding-top: 100px">
                <div class="layui-input-block">
                  <button type="button" class="layui-btn layui-btn-primary pre">上一步</button>

                  <button id="btn_create" class="layui-btn" lay-submit lay-filter="form_create">
                    开户
                  </button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  layui.data.done = function () {

    layui.use(['step', 'fox_upload', 'laydate'], function () {
      let $ = layui.$
        , form = layui.form
        , admin = layui.admin
        , step = layui.step
        , fox_upload = layui.fox_upload
        , laydate = layui.laydate
        , id = layui.router().search.id;
      console.log(id)
      let form_data = {}

      if (id) {
        admin.get('admin/enterprises/' + id, function (res) {
          let enterprise = res.data
          form.val('stepForm1', enterprise);
          form.val('stepForm2', enterprise);
          admin.get('admin/agents', function (res) {
            res.data.forEach(function (item) {
              if (enterprise.agent_id == item.id) {
                var option = '<option value="' + item.id + '" selected>' + item.name + '</option>';
              } else {
                var option = '<option value="' + item.id + '">' + item.name + '</option>';
              }
              $(option).appendTo('#agent_id')
              form.render();
            })
          })

          admin.get('admin/enterprises/get_address?level=1', function (res) {
            res.data.forEach(function (item) {
              if (enterprise.province == item.province_code) {
                var option = '<option value="' + item.province_code + '" selected>' + item.province_name + '</option>';
              } else {
                var option = '<option value="' + item.province_code + '">' + item.province_name + '</option>';
              }

              $(option).appendTo('#province')
              form.render();
            })
          })

          admin.get('admin/enterprises/get_address?level=2&province_code=' + enterprise.province, function (res) {
            res.data.forEach(function (item) {
              if (enterprise.city == item.city_code) {
                var option = '<option value="' + item.city_code + '" selected>' + item.city_name + '</option>';
              } else {
                var option = '<option value="' + item.city_code + '">' + item.city_name + '</option>';
              }

              $(option).appendTo('#city')
              form.render();
            })
          })

          admin.get('admin/enterprises/get_address?level=3&city_code=' + enterprise.city, function (res) {
            res.data.forEach(function (item) {
              if (enterprise.district == item.district_code) {
                var option = '<option value="' + item.district_code + '" selected>' + item.district_name + '</option>';
              } else {
                var option = '<option value="' + item.district_code + '">' + item.district_name + '</option>';
              }

              $(option).appendTo('#district')
              form.render();
            })
          })

          admin.get('admin/enterprises/get_bank', function (res) {
            res.data.forEach(function (item) {
              if (enterprise.bankCode == item.code) {
                var option = '<option value="' + item.code + '" selected>' + item.name + '</option>';
              } else {
                var option = '<option value="' + item.code + '">' + item.name + '</option>';
              }

              $(option).appendTo('#bank_code')
              form.render();
            })
          })

          //上传控件初始化
          fox_upload.render({
            elem: '#logo_image'
            , url: 'admin/products/image'
            , headers: {
              Authorization: admin.getAccessToken('Bearer')
            }
            , value: enterprise.licenceUrl ?? null
            , text: '点击上传'
            , name: 'licenceUrl'
          })

          //上传控件初始化
          fox_upload.render({
            elem: '#legalLicenceFrontUrl'
            , url: 'admin/products/image'
            , headers: {
              Authorization: admin.getAccessToken('Bearer')
            }
            , value: enterprise.legalLicenceFrontUrl ?? null
            , text: '点击上传'
            , name: 'legalLicenceFrontUrl'
          })

          //上传控件初始化
          fox_upload.render({
            elem: '#legalLicenceBackUrl'
            , url: 'admin/products/image'
            , headers: {
              Authorization: admin.getAccessToken('Bearer')
            }
            , value: enterprise.legalLicenceBackUrl ?? null
            , text: '点击上传'
            , name: 'legalLicenceBackUrl'
          })

        });
      } else {
        admin.get('admin/agents', function (res) {
          res.data.forEach(function (item) {
            var option = '<option value="' + item.id + '">' + item.name + '</option>';
            $(option).appendTo('#agent_id')
            form.render();
          })
        })

        admin.get('admin/enterprises/get_address?level=1', function (res) {
          res.data.forEach(function (item) {
            var option = '<option value="' + item.province_code + '">' + item.province_name + '</option>';
            $(option).appendTo('#province')
            form.render();
          })
        })

        admin.get('admin/enterprises/get_bank', function (res) {
          res.data.forEach(function (item) {
            var option = '<option value="' + item.code + '">' + item.name + '</option>';
            $(option).appendTo('#bank_code')
            form.render();
          })
        })

        //上传控件初始化
        fox_upload.render({
          elem: '#logo_image'
          , url: 'admin/products/image'
          , headers: {
            Authorization: admin.getAccessToken('Bearer')
          }
          , text: '点击上传'
          , name: 'licenceUrl'
        })

        //上传控件初始化
        fox_upload.render({
          elem: '#legalLicenceFrontUrl'
          , url: 'admin/products/image'
          , headers: {
            Authorization: admin.getAccessToken('Bearer')
          }
          , text: '点击上传'
          , name: 'legalLicenceFrontUrl'
        })

        //上传控件初始化
        fox_upload.render({
          elem: '#legalLicenceBackUrl'
          , url: 'admin/products/image'
          , headers: {
            Authorization: admin.getAccessToken('Bearer')
          }
          , text: '点击上传'
          , name: 'legalLicenceBackUrl'
        })
      }

      step.render({
        elem: '#stepForm',
        filter: 'stepForm',
        width: '100%', //设置容器宽度
        stepWidth: '750px',
        height: '500px',
        stepItems: [{
          title: '填写基本信息'
        }, {
          title: '添加文件'
        }]
      });

      form.render()

      form.on('select(choosecity)', function (obj) {
        admin.get('admin/enterprises/get_address?level=2&province_code=' + obj.value, function (res) {
          $('#city').html('<option value="">请选择市</option>');
          $('#district').html('<option value="">请选择县/区</option>');
          res.data.forEach(function (item) {
            var option = '<option value="' + item.city_code + '">' + item.city_name + '</option>';
            $(option).appendTo('#city')
            form.render();
          })
        })
      })

      form.on('select(choosedistrict)', function (obj) {
        admin.get('admin/enterprises/get_address?level=3&city_code=' + obj.value, function (res) {
          $('#district').html('<option value="">请选择县/区</option>');
          res.data.forEach(function (item) {
            var option = '<option value="' + item.district_code + '">' + item.district_name + '</option>';
            $(option).appendTo('#district')
            form.render();
          })
        })
      })
      //# STEP 1
      laydate.render({
        elem: '#licenceNoExpires'
        , type: 'date'
      });

      laydate.render({
        elem: '#legalLicenceNoExpires'
        , type: 'date'
      });

      form.on('submit(formStep)', function (data) {
        form_data = data.field;
        step.next('#stepForm')
        return false;
      });

      $('.pre').click(function () {
        step.pre('#stepForm');
      });

      form.on('submit(form_create)', function (data) {
        var obj = Object.assign(form_data, data.field);
        admin.post('admin/enterprises/store', obj, function (res) {
          if (res.code != 0) {
            layer.alert(res.msg);
          } else {
            layer.alert('操作成功');
            history.back()
          }

          return false;

        })
        return false;
      })
    })
  }
</script>
